<template>
  <div class="">
    <h1>这是计算属性页面</h1>
    <h3>大于等于20岁的人有{{ num }}个</h3>

    <h3>{{ flag }}</h3>
    <button @click="flag++">改变</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "小明",
          age: 18,
        },
        {
          name: "小红",
          age: 20,
        },
        {
          name: "迪丽热巴",
          age: 25,
        },
        {
          name: "杨幂",
          age: 30,
        },
        {
          name: "赵丽颖",
          age: 30,
        },
        {
          name: "大宝贝",
          age: 32,
        },
      ],

      flag: 0,
    };
  },
  mounted() {},
  methods: {},
  components: {},
  computed: {
    num() {
      //   let ages = 0;
      //   this.list.forEach((item) => {
      //     if (item.age >= 20) {
      //       ages++;
      //     }
      //   });
      //   return ages;

      let arr = this.list.filter((item) => {
        return item.age >= 20;
      });
      return arr.length;
    },
  },
};
</script>

<style lang="scss"></style>
